<template>
	<view class="tasks-list-component">
		<view class="top-row">
			<view class="top-btns">
				<view class="search-btn" @tap.stop="onQuery"><u-icon name="search" /></view>
				<view class="reset-btn" @tap.stop="onReset">重 置</view>
			</view>
		</view>
		<scroll-view class="list-scroll-view" :scroll-y="true" @scrolltolower="onMoreList">
			<view class="list-group-box">
				<!-- @@@@@@@@@@@ -->
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="item-context">
						<view class="item-no-row auto-wrap">任务编号：{{item.taskno}}</view>
						<view class="item-typs-row auto-wrap">{{item.tasktypename}}</view>
						<view class="item-postions-row">
							<view class="item-position auto-wrap">目标位置:{{item.sourceplace}}</view>
							<view class="item-position auto-wrap">起始位置:{{item.toplace}}</view>
						</view>
					</view>
					<view class="item-right">
						<u-button type="primary" text="详情" size="mini" @click="onAction(item)" />
					</view>
				</view>
				<!-- @@@@@@@@@@@ -->
			</view>
			<view class="no-more-text-row" v-if="!hasMore">没有更多了</view>
		</scroll-view>
	</view>
</template>

<script>
import { parseDic } from '@/static/js/utils/index.js'
const pagination = {
	PageNo:1,
	PageSize:10
}
export default {
	name:'tasksListComponent',
	emits:['query','update:resetflag','action'],
	data(){
		return {
			hasMore:true,
			queried:{},
			list:[]
		}
	},
	methods:{
		onQuery(){
			this.$emit('query')
		},
		onReset(){
			this.resetQuery()
		},
		resetQuery(){
			this.$emit('update:resetflag',new Date().getTime())
		},
		newList(params=null,callback){
			this.queried = {...pagination}
			if (params) {
				this.queried = {...this.queried,...params}
			}
			this.getList(callback)
		},
		onMoreList(){
			if (this.hasMore) {
				this.queried.PageNo++;
				this.getList();
			}
		},
		getList(callback){
			this.$api.get('GetPDATask',this.queried,{block:'task'}).then((res)=>{
				let arr = (res.rows || []).map((obj)=>{
					obj.tasktypename = parseDic(this.$store,'task_type',obj.tasktype)
					return obj
				});
				let len = arr.length;
				if (this.queried.PageNo>=res.totalPage) {
					this.hasMore = false
				} else {
					this.hasMore = true
				}
				if (this.queried.PageNo===1) {
					this.list = arr;
				} else {
					this.list = [...this.list,...arr];
				}
				callback && callback(true)
			}).catch(err=>{
				console.log(err)
				callback && callback(false)
			})
		},
		onAction(obj) {
			this.$emit('action',obj)
		}
	}
}
</script>

<style scoped lang="scss">
.tasks-list-component{
	$topSize:100rpx;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	padding-top: $topSize;
	.top-row{
		position: absolute;
		z-index: 5;
		top: 0;
		left: 0;
		height: $topSize;
		width: 100%;
		padding: 10rpx 16rpx;
		box-sizing: border-box;
		border-bottom:1px solid #F0F8FF;
		background-color: $uni-bg-color;
	}
	.top-btns{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border: 1px solid $uni-border-color;
		border-radius: 40rpx / 50%;
		display: flex;
		overflow: hidden;
		color: $uni-text-color-grey;
	}
	.search-btn,.reset-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.reset-btn{
		flex-shrink: 0;
		width: 160rpx;
		border-left: 1px solid $uni-border-color;
	}
	.search-btn{
		flex-grow: 1;
		background-color: #DCDCDC;
	}
	.list-scroll-view{
		height: 100%;
	}
	.list-group-box{
		padding-top: 12rpx;
		.list-item{
			background-color: $uni-bg-color;
			box-shadow: 0px 2rpx 6rpx rgba(34, 25, 25, 0.2);
			display: flex;
			margin-bottom: 12rpx;
			&:last-child{
				border-bottom: 0;
			}
			.item-right{
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 120rpx;
				box-sizing: border-box;
				padding: 0 12rpx;
			}
			.item-context{
				flex-grow: 1;
				padding: 8rpx 16rpx;
				.item-no-row{
					font-size: 24rpx;
					color: #999999;
					margin-bottom: 10rpx;
				}
				.item-typs-row{
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 10rpx;
				}
				.item-postions-row{
					display: flex;
					font-size: 24rpx;
					color: #999999;
					.item-position{
						width: 50%;
					}
				}
			}
		}
	}
}
</style>